<template>
	<view class="bigBox">
		<view class="headerBox">
			操作记录
			<view class="down">
				<picker @change="bindPickerChange" :value="value" :range="array" range-key="text">
					<image src="/static/down.png" mode=""></image>
				</picker>
			</view>
		</view>
		<view class="container">
			<view class="colBox">
				<view class="item number">
					序号
				</view>
				<view class="item time">
					时间
				</view>
				<view class="item name">
					名称
				</view>
				<view class="item status">
					状态
				</view>
			</view>
			<scroll-view class="list" scroll-y="true" @scrolltolower="scrolltolower">
				<view class="row" v-for="item in list" :key="item.index">
					<view class="item number">{{item.index}}</view>
					<view class="item time">{{item.time}}</view>
					<view class="item name">{{item.name}}</view>
					<view class="item status">
						<view class="btn" :class="[item.status == 1 ? 'green' :'red']">
							{{item.status == 1 ? '开启':'关闭'}}
						</view>
					</view>
				</view>
				<!-- 根据长度判断 -->
				<view class="all">
					已加载全部数据
				</view>
			</scroll-view>
		</view>
		<tabbar active="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/Tab_bar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				flag: true,
				array: [{
					text: '开启',
					value: 1
				}, {
					text: '关闭',
					value: 2
				}],
				value: 0,
				list: [
				{
					index: 1,
					time: '2023-02-15 08:30',
					name: '除尘操作',
					status: 1
				}, {
					index: 2,
					time: '2023-02-15 08:30',
					name: '除尘操作',
					status: 2
				}, {
					index: 3,
					time: '2023-02-15 08:30',
					name: '除尘操作',
					status: 2
				}, ]
			}
		},
		onLoad() {

		},
		methods: {
			// 选择状态
			bindPickerChange(e) {
				console.log(e, 'e')
				this.value = e.detail.value
			},
			// 滑动到底部分页加载
			scrolltolower(e) {
				// 判断
				if (this.flag) {
					// 请求完成改成true
					this.flag = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bigBox {
		background: #f9fafb;
		min-height: 100vh;

		.headerBox {
			height: 52.5px;
			display: flex;
			justify-content: center;
			align-items: center;
			// border-bottom: 1px solid #E5E7EB;
			font-feature-settings: "kern" on;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
			background: #FFFFFF;
			font-family: Roboto;
			font-size: 15.75px;
			font-weight: 500;
			position: relative;

			.down {
				position: absolute;
				right: 15px;
				top: 50%;
				transform: translateY(-50%);

				image {
					width: 12.25px;
					height: 14px;
				}
			}
		}

		.container {
			box-sizing: border-box;
			font-family: Roboto;

			.colBox {
				display: flex;

				.item {
					height: 42px;
					line-height: 42px;
					box-sizing: border-box;
					font-size: 12.25px;
					color: #4B5563;
				}

				.number {
					width: 58px;
					padding-left: 10px;
				}

				.time {
					width: 135px;
					text-align: center;
				}

				.name {
					width: 113px;
					text-align: center;
				}

				.status {
					flex: 1;
					text-align: right;
					padding-right: 10px;
				}
			}

			.list {
				height: calc(100vh - 52.5px - 56px - 42px);

				.row {
					display: flex;
					align-items: center;

					.item {
						font-size: 12.25px;
						background: #FFFFFF;
						height: 100%;
						height: 49px;
						line-height: 49px;
						border-bottom: 1px solid #F3F4F6;
					}

					.number {
						width: 58px;
						padding-left: 10px;
						color: #6B7280;

					}

					.time {
						width: 135px;
						text-align: center;
						color: #4B5563;
					}

					.name {
						width: 113px;
						text-align: center;
						color: #1F2937;
					}

					.status {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding-right: 10px;

						.btn {
							display: inline-block;
							width: 35px;
							height: 20px;
							line-height: 20px;
							border-radius: 3.5px;
							font-size: 10.5px;
							background: #FFFFFF;
							text-align: center;
						}

						.green {
							background: #E8F5E9;
							color: #4CAF50;
						}

						.red {
							background: #FFEBEE;
							color: #F44336;
						}
					}
				}
				.all {
					line-height: 14px;
					text-align: center;
					color: #9CA3AF;
					font-size: 10.5px;
					margin: 13.5px 0;
				}
			}
		}
	}
</style>